iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
Modern Web

React 學得動嗎系列 第 18

[Day 18] React 實戰:打造健身房後台 Dashboard

  • 分享至 

  • xImage
  •  

今天是Day 18,我們前面學習了許多React的技巧,現在應該要來實作看看。我們來使用 React 開發一個實際的專案 —— 健身房後台 Dashboard。我們將從需求分析到技術選擇,逐步介紹開發這類專案的過程。

專案需求分析

首先,我們來列出這個健身房後台 Dashboard 的核心功能需求:

  1. 會員管理:查看、新增、編輯會員資料
  2. 教練管理:查看、新增、編輯教練資料
  3. 課程排程:安排和管理健身課程
  4. 業績報表:生成各種統計報表
  5. RBAC(Role-Based Access Control):根據用戶角色控制權限

技術選擇

1. UI 套件

在選擇 UI 套件時,我們可以考慮以下幾個選項:

  • shadcn/ui:輕量、高度可定制,但需要自行實作部分複雜的組件。
  • Ant Design:功能豐富,開箱即用,但風格相對固定。
  • Element Plus:類似 Ant Design,也具有全面的功能。

考量到我們需要的靈活性與定制能力,同時又不想從零開始實作複雜組件,我建議選擇 shadcn/ui 作為基礎,並結合其他套件來處理特定需求(如表格管理)。

2. 狀態管理

對於這類中型應用,我推薦使用 Zustand。它簡單輕量,且足夠靈活來應對複雜的應用場景。

3. 路由

使用 React Router 來處理應用中的路由管理。

4. 表格處理

shadcn/ui 沒有內建表格組件,但我們可以使用 TanStack Table (前身為 react-table)來滿足我們對複雜表格管理的需求。

5. 表單處理

使用 React Hook Form 來進行表單邏輯的處理,這樣可以有效管理表單狀態並減少不必要的重渲染。

6. API 請求

使用 AxiosTanStack Query(前身為 react-query)來管理 API 請求,根據需求選擇合適的工具來優化請求處理。

專案結構

fitness-dashboard/
├── src/
│   ├── components/         # 可重用的 UI 組件
│   ├── pages/              # 頁面組件
│   ├── layouts/            # 布局組件
│   ├── hooks/              # 自定義 Hooks
│   ├── services/           # API 服務
│   ├── stores/             # Zustand stores
│   ├── utils/              # 工具函數
│   ├── types/              # TypeScript 類型定義
│   └── App.tsx             # 根組件
├── public/                 # 靜態資源
└── package.json

RBAC 實現

在這個專案中,我們可以透過自定義 Hook 來實現基於角色的存取控制 (RBAC):

// hooks/useAuth.ts
import create from 'zustand';

interface AuthStore {
  user: User | null;
  roles: string[];
  checkPermission: (permission: string) => boolean;
}

const useAuthStore = create<AuthStore>((set, get) => ({
  user: null,
  roles: [],
  checkPermission: (permission) => {
    const { roles } = get();
    return roles.includes(permission);
  },
}));

export const useAuth = () => useAuthStore();

接著,我們可以建立一個權限控制的高階元件 (HOC) 來進行存取控制:

// components/PrivateRoute.tsx
import React from 'react';
import { useAuth } from '../hooks/useAuth';

const PrivateRoute: React.FC<{ permission: string; children: React.ReactNode }> = ({ permission, children }) => {
  const { checkPermission } = useAuth();

  if (!checkPermission(permission)) {
    return <div>無權訪問</div>;
  }

  return <>{children}</>;
};

export default PrivateRoute;

表格實現

使用 TanStack Table 來實作複雜的表格功能:

import { useTable, usePagination, useSortBy } from '@tanstack/react-table';
import { Table } from '@/components/ui/table';

const MembersTable = ({ data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useSortBy,
    usePagination
  );

  return (
    <Table {...getTableProps()}>
      {/* 表格內容 */}
    </Table>
  );
};

簡單的 Dashboard 頁面實作

import React from 'react';
import { Card } from '@/components/ui/card';
import MembersTable from '@/components/MembersTable';
import { useAuth } from '@/hooks/useAuth';

const Dashboard: React.FC = () => {
  const { user } = useAuth();

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">歡迎, {user?.name}</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        <Card>
          <div className="p-4">
            <h2 className="font-bold">總會員數</h2>
            <p className="text-2xl">1,234</p>
          </div>
        </Card>
        {/* 更多統計卡片 */}
      </div>
      <PrivateRoute permission="viewMembers">
        <MembersTable />
      </PrivateRoute>
    </div>
  );
};

export default Dashboard;

小結

今天,我們練習了如何規劃並開發一個實際的 React 專案 —— 健身房後台管理 Dashboard。專案裡有技術選擇、專案結構、RBAC 的實現,以及如何處理複雜的表格功能,明天我們再來繼續實作這個專案。

如果你想進一步了解今天介紹的技術,可以參考以下官方文檔:


上一篇
[Day 17] 幾個React 效能優化技巧
下一篇
[Day 19] Gym Pro:健身房後台管理系統實作
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言